<template>
  <el-select  :disabled="disabled" :multiple="multiple" v-model="brandId" placeholder="请选择品牌" filterable reserve-keyword  :loading="loading" :remote-method="remoteMethod">
    <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>
<script lang="ts" setup>
 import {ref,watch,onMounted} from 'vue'
 import {Brands} from '@/api/site'
 const props = defineProps({
    modelValue: {
      type: Number,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    },
    multiple: {
      type: Boolean,
      default: false
    }
  })
  const brandId = ref<number>(props.modelValue)
  interface Emits { //定义事件
    (e: 'update:modelValue', value: any): void
  }
  const emit = defineEmits<Emits>()
  watch(()=>brandId.value,() =>{
    emit('update:modelValue', brandId.value)
  })
  watch(()=>props.modelValue,() =>{
    brandId.value = props.modelValue
  })
  const queryParams = ref<PageModel<BrandQuery>>({
    orderbyName: 'sequence',
    isAsc: false,
    beginDateTime: '',
    endDateTime: '',
    entity: {
      name: '',
      firstLetter:''
    },
    page: {
      index: 1,
      size: 20
    }
  })
  const list = ref<Brand[]>([])
  const loading = ref(false)
  const remoteMethod = (query: string) => {
    if(query) {
      loading.value = true
      queryParams.value.entity.name = query
      loadData()
    }
  }
  const loadData =():void => {
    Brands(queryParams.value).then((res:ServiceResponse<Brand[]>) => {
      loading.value = false
      if(res.success)
        list.value = res.data ?? []
    })
  }
  onMounted( () => {
    loadData()
  })
</script>
<style lang="scss" scoped>

</style>